﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/BaseMaster/Pages.Master" AutoEventWireup="true" CodeBehind="UserInfo.aspx.cs" Inherits="Liu_Project.Web.Admin.Pages.Personal.EntUser.UserInfo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="baseTitle" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="baseHead" runat="server">
    <style>
        .layui-upload-img { width: 100px;height: 100px;margin: 0 10px 10px 0;}
        .layui-form-item .layui-input-inline {width:388px !important;}
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="baseContent" runat="server">
    <div class="progressDiv" style="display: none; border-radius: 20px;">
        <!-- 进度条div -->
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">个人资料</div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="userForm" style="padding: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="UserNo" placeholder="请输入用户编号" lay-verify="required|userno" lay-vertype="tips" autocomplete="off" class="layui-input" maxlength="18" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="UserName" placeholder="请输入用户名称" lay-verify="required|username" lay-vertype="tips" autocomplete="off" class="layui-input" maxlength="12" />
                            </div>
                        </div>
                        <div class="layui-form-item" style="position: relative;">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline">
                                <img class="layui-upload-img" id="Img" />
                                <%--<input type="text" id="Img" name="Img" lay-verify="required" placeholder="图片地址" value="" disabled class="layui-input">--%>
                            </div>
                            <div class="layui-input-inline layui-btn-container" style="width: auto; position: absolute; bottom: 0">
                                <button type="button" class="layui-btn layui-btn-primary" id="UploadImg">
                                    <i class="layui-icon layui-icon-upload"></i>上传图片
                                </button>
                                <a id="openImg" class="layui-btn layui-btn-primary">查看图片</a>
                            </div>
                            <div class="layui-form-mid layui-word-aux pwd">*头像最大尺寸100*100 (上传后自动剪切)</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Phone" placeholder="请输入手机号" lay-verify="required|phone|number" lay-vertype="tips" autocomplete="off" class="layui-input" maxlength="11">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Email" placeholder="请输入邮箱" lay-verify="required|email" lay-vertype="tips" autocomplete="off" class="layui-input" maxlength="20">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="Save" id="Save">保存</button>
                                <button class="layui-btn" id="uploadImg" style="display: none"></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="baseScript" runat="server">
    <script>
        !function () {
            var CurrData = {};
            GetObjectInfoFunction_Async("Admin/Handler/BaseHand/UserRoleHand.ashx", { "act": "QueryById" }, function (result) {
                if (result.IsSuccess) {
                    if (result.data.length == 0)
                        return;
                    CurrData = result.data;
                    if (StringIsNullOrEmpty(CurrData.Img))
                        CurrData.Img = "/Admin/images/admin.jpg";

                    $('#Img').attr('src', CurrData.Img);
                    layui.form.val("userForm", CurrData);
                }
            })

            layui.form.verify({
                userno: function (value, item) {
                    if (!new RegExp(/^[0-9a-zA-Z]*$/g).test(value)) {
                        return '只能是字母，数字或字母数字组合';
                    }
                },
                username: function (value, item) {//value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '不能全为数字';
                    }
                }
            });

            //上传进度条
            //var fun;
            //var show = layer.open({
            //    type: 1
            //    , title: false
            //    , content: $(".progressDiv")
            //    , success: function (layero, index) {
            //        fun = setInterval(function () {
            //            element.progress('demo', t + '%');
            //            if (t >= 95) {
            //                clearInterval(fun);
            //                layer.close(show);
            //            } else {
            //                t++;
            //            }
            //        }, 100)
            //    },
            //    end: function () {
            //        clearInterval(fun);
            //    }
            //});

            var base64Str = "";
            var show;
            //普通图片上传
            var uploadInst = layui.upload.render({
                elem: '#UploadImg'
                , async: false
                , accept: "images"//文件类型
                , auto: false
                , bindAction: '#uploadImg'
                , number: 1
                , size: 38
                , url: bootPATH + 'Admin/Handler/BaseHand/UploadHand.ashx'
                , data: { "act": "UploadUserImg" }
                , choose: function (obj) {
                    obj.preview(function (index, file, result) {
                        base64Str = result;
                        $('#Img').attr('src', result);
                    });
                }
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    if (StringIsNullOrEmpty(base64Str))
                        return;
                    this.data["base64Str"] = base64Str;
                    var content = $(".progressDiv").html();
                    content.replace('none', 'block')
                    show = layer.open({
                        type: 1
                        , title: false
                        , closeBtn: 0
                        , shade: 0.1
                        , content: content
                        , area: ['500px']
                    });
                }
                , done: function (res) {
                    layer.close(show);
                    //如果上传失败
                    if (res.code == 0) {
                        return layer.msg('上传失败');
                    }
                    CurrData.Img = res.data;
                    save();
                }
                , error: function () {
                    layer.confirm('上传失败,是否重新上传?', { icon: 0, title: '提示' }, function (index) {
                        //重新上传
                        uploadInst.upload();
                        layer.close(index);
                    }, function (index) {
                        layer.close(index);
                        layer.close(show);
                    });
                }
                , progress: function (n, elem) {
                    var percent = n + '%' //获取进度百分比
                    layui.element.progress('demo', percent); //可配合 layui 进度条元素使用

                    console.log(percent);
                }
            });

            $("#openImg").click(function () {
                var src = !StringIsNullOrEmpty(base64Str) ? base64Str : CurrData.Img;
                layer.photos({
                    photos: { title: "查看头像", data: [{ src: src }] }
                    , shade: 0.1
                    , closeBtn: 1
                    , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            })

            var formData;
            layui.form.on('submit(Save)', function (data) {
                formData = data;
                if (!StringIsNullOrEmpty(base64Str)) {
                    $('#uploadImg').trigger("click");
                }
                else
                    save();

                return false;
            });

            function save() {
                formData.field.Img = CurrData.Img
                UpdateJson(CurrData, formData.field)
                top.layer.load(1);
                GetObjectInfoFunction_Async("Admin/Handler/BaseHand/UserRoleHand.ashx", {
                    "act": "Save", "_state": "Edit", "Data": JSON.stringify(CurrData)
                }, function (result) {

                    top.layer.msg('保存成功');
                })
            }
        }();
    </script>
</asp:Content>
